<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="vue.js"></script>
  <link rel="stylesheet" href="animate.css">
  <style>
    /* @keyframes move {
      0%{
        transform:translateY(-400px) rotate(450deg);
        opacity: 0;
      }
      25%{
        transform:translateY(0px) rotate(180deg);
        opacity: 0.5;
      }
      50%{
        transform:translateY(0px) translateX(300px) rotate(90deg);
        opacity: 0.8;
      }
      75%{
        transform:translateY(0px) translateX(0px) rotate(0deg);
        opacity: 1;
      }
      100%{
        transform:translateY(0px) translateX(0px) rotate(360deg);
        opacity: 1;
      }
    } */
    .fade-enter-active{
      animation: slideInUp 2s;
    }
    .fade-leave-active{
      animation: slideOutUp  2s reverse;
    }
    .box{
      width:100px;
      height:100px;
      background: rgb(136, 29, 29);
      margin:50px 0 0 100px;
    }
  </style>
</head>
<body>
  <div id="app">
    <button @click="isShow = !isShow">{{ isShow?"消失":"显示" }}</button>
    <transition name="fade">
      <div class="box" v-if="isShow"></div>
    </transition>
    
  </div>
  <script>
    new Vue({
      el:"#app",
      data:{
        isShow:false
      }
    })
  </script>
</body>
</html>